<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->

    <input
      ref="file"
      type="file"
      hidden
      @change="onFileChange"
    >
    <van-cell title="头像" is-link @click="$refs.file.click()">
      <van-image
        class="avatar"
        fit="cover"
        round
        :src="user.photo"
      />
    </van-cell>
    <van-cell
      title="昵称"
      :value="user.name"
      is-link
      @click="isNameShow = true"
    />
    <van-cell
      title="性别"
      :value="user.gender === 0?'女':'男'"
      is-link
      @click="isSexShow = true"
    />
    <van-cell
      title="生日"
      :value="user.birthday"
      is-link
      @click="isBirthdayShow = true"
    />

    <!-- 编辑昵称 -->
    <van-popup
      v-model="isNameShow"
      style="height: 100%;"
      position="bottom"
    >
      <user-edit
        v-model="user.name"
        @close="isNameShow=false"
        @input="input"
      />
    </van-popup>
    <!-- /编辑昵称 -->

    <!-- 编辑性别 -->
    <van-popup
      v-model="isSexShow"
      position="bottom"
    >
      <user-sex
        v-if="isSexShow"
        v-model="user.gender"
        @close="isSexShow = false"
        @updatsex="updatsex"
      />
    </van-popup>
    <!-- /编辑性别 -->

    <!-- 编辑生日 -->
    <van-popup
      v-model="isBirthdayShow"
      position="bottom"
    >
      <user-birthday
        v-if="isBirthdayShow"
        v-model="user.birthday"
        @close="isBirthdayShow = false"
        @updatebirthday="updatebirthday"
      />
    </van-popup>
    <!-- /编辑生日 -->

    <!-- 编辑头像 -->
    <van-popup
      v-model="isphotoShow"
      position="bottom"
      style="height: 100%;"
    >
      <user-photo
        v-if="isphotoShow"
        :img="img"
        @close="isphotoShow = false"
        @updatephoto="updatephoto"
      />
    </van-popup>
    <!-- /编辑头像 -->
  </div>
</template>

<script>
import { getUserinfo } from '@/api/user.js'
import UserEdit from './components/UserEdit.vue'
import UserSex from './components/UserSex.vue'
import UserBirthday from './components/UserBirthday.vue'
import UserPhoto from './components/UserPhoto.vue'
export default {
  components: { UserEdit, UserSex, UserBirthday, UserPhoto },
  data() {
    return {
      user: {},
      isNameShow: false,
      isSexShow: false,
      isBirthdayShow: false,
      isphotoShow: false,
      img: null
    }
  },

  created() {
    this.getUserinfo()

    // console.log(this.user)
  },

  methods: {
    async getUserinfo() {
      try {
        const res = await getUserinfo()
        // console.log(res)
        this.user = res
      } catch (err) {
        console.log(err)
      }
    },
    input(val) {
      this.user.name = val
    },
    updatsex(val) {
      this.user.gender = val
      this.isSexShow = false
    },
    updatebirthday(times) {
      this.user.birthday = times
      this.isBirthdayShow = false
    },
    onFileChange(e) {
      if (e.target.value === '') return
      this.isphotoShow = true
      this.img = window.URL.createObjectURL(e.target.files[0])
      e.target.value === ''
      // console.log(e.target.files)
    },
    updatephoto(photo) {
      this.user.photo = photo
      this.isphotoShow = false
    }
  }
}
</script>

<style scoped lang='less'>
.user-profile {
  .avatar {
    width: 60px;
    height: 60px;
  }
  /deep/.van-nav-bar__arrow {
    color: #fff;
  }
}
</style>
